@<template>
  <div id="bar" style="height: 300px; width: 300px" ref="bar"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props:{
    bars:{
      type:Object
    }
  },
  data(){
    return{
      chartsData:{}
    }
  },
  watch:{
    bars:function(val){
      // this.chartsData = val
        this.setCharts();
        return val
    }
  },
  methods: { //绘制图表方法
    setCharts() {
      let chart = this.$refs.bar;
      var myChart = echarts.init(chart);

      let option = {
        xAxis: {
          type: "category",
          //x轴上的数据
          data: this.bars.x,
        },
        yAxis: {
          //y轴
          type: "value",
        },
        series: [
          //后台发送网络请求传的数据
          {
            data: this.bars.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>